<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-01-14 11:08:01
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-03-22 14:47:59
-->
<template>
  <div>
    <el-dialog
      title="关联相关信息"
      :visible.sync="dialog.aboutShow"
      width="60%"
      @close="aboutShowClose"
      :modal-append-to-body="false"
    >
      <div class="left">
        <div v-for="(item, index) in tabList" :key="index">
          <div
            class="left-title"
            @click="toggleTitle(index)"
            :class="index == active ? 'active' : ''"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-tab" v-show="active == 0">
          <customers ref="customers" :drawerData="drawerData"></customers>
        </div>
        <div v-show="active == 1">
          <contacts ref="contacts" :drawerData="drawerData"></contacts>
        </div>
        <div v-show="active == 2">
          <opportunitys
            ref="opportunitys"
            :drawerData="drawerData"
          ></opportunitys>
        </div>
        <div v-show="active == 3">
          <certificate ref="certificate" :drawerData="drawerData"></certificate>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.aboutShow = false">取消</el-button>
        <el-button type="primary" @click="aboutSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import contacts from "./relevantInfo/contacts.vue";
import Customers from "./relevantInfo/customers.vue";
import Opportunitys from "./relevantInfo/opportunitys.vue";
import { crmAdd } from "@/api/task/dailyTask";
import Certificate from "./relevantInfo/certificate.vue";
export default {
  components: { contacts, Customers, Opportunitys, Certificate },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
    business: {
      type: Boolean,
      required: true,
    },
    taskId: {
      type: Number,
    },
  },
  data() {
    return {
      tabList: [
        { value: 1, label: "客户" },
        {
          value: 2,
          label: "联系人",
        },

        { value: 3, label: "商机" },
        { value: 4, label: "证书" },
      ],
      active: 0,
    };
  },
  methods: {
    aboutSubmit() {
      if (this.business) {
        this.$parent.taskForm.contacts = this.$refs.contacts.contacts;
        this.$parent.taskForm.customers = this.$refs.customers.customers;
        this.$parent.taskForm.opportunitys =
          this.$refs.opportunitys.opportunitys;
        this.$parent.taskForm.certificate = this.$refs.certificate.certificate;
        this.dialog.aboutShow = false;
      } else {
        let fd = new FormData();
        fd.append("contacts", JSON.stringify(this.$refs.contacts.contacts));
        fd.append("customers", JSON.stringify(this.$refs.customers.customers));
        fd.append(
          "opportunitys",
          JSON.stringify(this.$refs.opportunitys.opportunitys)
        );
        fd.append(
          "certificate",
          JSON.stringify(this.$refs.certificate.certificate)
        );
        fd.append("taskId", this.taskId);
        crmAdd(fd).then((res) => {
          this.$message.success(res.msg);
          this.dialog.aboutShow = false;
          this.$parent.getCrmList();
        });
      }
    },
    aboutShowClose() {
      this.$refs.contacts.contacts = [];
      this.$refs.customers.customers = [];
      this.$refs.opportunitys.opportunitys = [];
      this.$refs.certificate.certificate = [];
      this.dialog.aboutShowEject = false;
    },
    toggleTitle(i) {
      this.active = i;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  height: 720px;
  display: flex;
  .left {
    width: 10vw;
    height: 100%;
    border-right: 1px solid #ececec;
  }
  .right {
    padding: 0 20px;
    width: 90vw;
    height: 100%;
    overflow: auto;
    .right-tab {
      width: 100%;
    }
  }
}
.left-title {
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: center;
}
.active {
  background-color: #f0f4ff;
  color: #1267fa;
}
</style>